<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>企业服务-智能文书生成</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/report.css" />
    <!-- <link rel="stylesheet" href="../css/qyfw/qyfw_htqc.css" /> -->
    <link rel="stylesheet" href="../css/qyfw/qyfw_znwssc.css" />
  </head>
  <body>
    <div id="header"></div>
    <header class="header">
      <div class="text">
        <div class="inner">
  
          <p><span>首页</span>-<span>企业服务</span>-<span>智能文书生成</span></p>
        </div>
      </div>
    </header>
    <div class="banner">
      <div class="inner">
        <h3>智能文书生成</h3>
        <div class="txt">
          智能文书生成介绍样式展示合同起草介绍样式展示合同起草介绍展示。
        </div>
      </div>
    </div>
    <div class="main">
      <ul class="cf">
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>买卖租赁</h5>
            <p>该分类包含的业务简介多行展示简介多行展示简介多行展示</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>委托居间</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>知识产权</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>股权股份</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>投资融资</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>民间借贷</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>建筑工程</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>仓储运输</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              查看服务
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"></div>
            <h5>其他</h5>
            <p>该分类包含的业务简介该分类包含的业务简介</p>
            <div class="btn">
              购买服务
            </div>
          </a>
        </li>
      </ul>
    </div>
    <footer>
      <div class="inner" style="position: relative;">
        <img class="logo" src="../images/logo_footer.png" alt="" />
        <ol>
          <li><a href="">服务支持</a></li>
          <li><a href="">付费咨询</a></li>
          <li><a href="">云小律</a></li>
        </ol>
        <a href="#" class="sm">法律声明</a>
        <p>@备案号22582522</p>
      </div>
    </footer>
    <!-- 数字插件 -->
    <script src="../lib/jquery-3.2.1.min.js"></script>
    <script src="../lib/prefixfree.min.js"></script>
    <script src="../lib/countup.js"></script>
    <script src="../js/style.js"></script>
    <script>
      $(function() {
        function time() {
          var d = new Date();
          //var s = (d.getSeconds() + d.getMilliseconds()/1000) /60 * 360;
          var n = parseInt($(".main.s .top h1 span").html());
          console.log(n);
          var ss = (n / 100) * 180;
          console.log(ss);
          $("#watch .hands .s").animate({}, function() {
            //第一个花括号里面是动画内容，可以为空，但不能省去中括号
            $("#watch .hands .s").css("transform", "rotate(" + -ss + "deg)"); //在回调函数里面改变css属性来实现transform中的动画变换
          });
          // $('.shadow p').html();
        }

        time();
        var options = {
          useEasing: true,
          useGrouping: true,
          separator: ",",
          decimal: "."
        };
        var number = parseInt($(".main.s .top h1 span").html());
        var demo = new CountUp("p1", 0, number, 0, 0, options);
        demo.start();
      });
    </script>
    <script src="../lib/circleChart.min.js"></script>
    <script>
      var options = {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: "."
      };
      var demo1 = new CountUp("11", 0, 35, 0, 0, options);
      var demo2 = new CountUp("22", 0, 42, 0, 0, options);
      var demo3 = new CountUp("33", 0, 94, 0, 0, options);
      var demo4 = new CountUp("44", 0, 58, 0, 0, options);
      var demo5 = new CountUp("55", 0, 24, 0, 0, options);
      var demo6 = new CountUp("66", 0, 12, 0, 0, options);

      // 滚动条距离顶部的距离 大于 200px时

      $(".circleChart#2").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#2ad1e8",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
        // onDraw: function(el, circle) {
        //     circle.text(Math.round(circle.value));
        // }
      });
      $(".circleChart#3").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#ffa751",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#4").circleChart({
        size: 150,
        startAngle: 0,
        animate: true,
        color: "#ee5764",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#5").circleChart({
        size: 150,
        startAngle: 120,
        animate: true,
        color: "#ffa751",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#6").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#39c1ef",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#7").circleChart({
        size: 150,
        startAngle: 70,
        animate: true,
        color: "#39c1ef",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });

      demo1.start();

      demo2.start();

      demo3.start();

      demo4.start();

      demo5.start();

      demo6.start();
    </script>
    <script src="../lib/circle-progress.js"></script>

    <script>
      //初始化环形进度条
      function create_circle(num, val_num) {
        if (num == 1 || num == 5 || num == 6) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num, //你需要展示的值，值从0.0到1.0，默认值为0
              size: 120, //环形图的大小，单位像素，默认值100
              startAngle: -3, //初始角度，默认值为-Math.PI
              reverse: false, //是否反向绘制圆弧和动画，默认值为false
              lineCap: "round", //圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
              thickness: 18, //进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
              emptyFill: "rgba(0, 0, 0, .1)", //空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
              fill: {
                //圆弧填充的配置。
                //				-{ color: "#ff1e41" }
                //				-{ color: 'rgba(255, 255, 255, .3)' }
                //				-{ gradient: ["red", "green", "blue"] }
                //				-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
                //				-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
                //				-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
                //				-{ image: "http://i.imgur.com/pT0i89v.png" }
                //				-{ image: imageInstance }
                //				-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
                //				默认值为{ gradient: ["#3aeabb", "#fdd250"] }
                gradient: ["#39c1ef", "#2ae6a8"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              //当图像正在绘制时的监听事件
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)));
            });
        } else if (num == 2 || num == 4) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num,
              size: 120,
              startAngle: -2.5,
              reverse: false,
              lineCap: "round",
              thickness: 18,
              fill: {
                gradient: ["#ffa751", "#ffe259"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)) + "");
            });
        } else if (num == 3) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num,
              size: 120,
              startAngle: 0,
              reverse: false,
              lineCap: "round",
              thickness: 18,
              fill: {
                gradient: ["#ee5764", "#ffc371"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)) + "");
            });
        }
      }

      create_circle(1, 0.35);
      create_circle(2, 0.42);
      create_circle(3, 0.94);
      create_circle(4, 0.58);
      create_circle(5, 0.24);
      create_circle(6, 0.12);

      //当鼠标点击环形进度条时
      //http://www.htmleaf.com/html5/html5-canvas/201505271918.html
      console.log((-Math.PI / 4) * 3);
    </script>

    <script>
      // 进入变色
      console.log($(".main ul>li"));
      $(".main ul>li")
        .eq(0)
        .mouseenter(function() {
          // alert(11111)
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_02.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(0)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_01.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(1)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_04.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(1)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_03.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(2)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_06.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(2)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_05.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(3)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_08.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(3)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_07.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(4)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_10.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(4)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_09.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(5)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_12.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(5)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_11.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(6)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_14.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(6)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_13.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(7)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_16.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(7)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_15.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      $(".main ul>li")
        .eq(8)
        .mouseover(function() {
          $(this)
            .css({
              border: "1px solid #3482cc",
              background: "#f0f7fd"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_18.png)"
            })
            .siblings("h5")
            .css({
              color: "#003d84"
            })
            .siblings("p")
            .css({
              color: "#003d84"
            })
            .siblings(".btn")
            .css({ background: "#f85e05" });
        });
      $(".main ul>li")
        .eq(8)
        .mouseleave(function() {
          var index = $(this).index();
          // alert(1)
          $(this)
            .css({
              border: "1px solid #e2e7ec",
              background: "#f8fafc"
            })
            .find(".pic")
            .css({
              "background-image": "url(../images/qyfw/qyfw_htqc_17.png)"
            })
            .siblings("h5")
            .css({
              color: "#000"
            })
            .siblings("p")
            .css({
              color: "#000"
            })
            .siblings(".btn")
            .css({ background: "#003d84" });
        });

      // 页面跳转
      $(".main ul li >a").click(function() {
        var h5txt = $(this)
          .find("h5")
          .text();
        $(this).attr("href", "./qyfw_znwssc_info.html?" + h5txt);
      });
    </script>

<script>$(function() {$('#header').load('../header.html');})</script>

  </body>
</html>
